<template>
	<view class="page2">
		<view class="address-data">
			<view class="address-list" @click="onSkip('address')">
				<view class="list">
					<text>{{addressMessage.provide}}</text>
				</view>
				<view class="list">
					<text class="address">{{addressMessage.address}}</text>
				</view>
				<view class="list">
					<text>{{addressMessage.name}}</text>
					<text>{{addressMessage.mobile}}</text>
				</view>
				<view class="list">
					<text class="tips">(如果快递不方便接收，您可以选择暂时寄存服务)</text>
				</view>
			</view>
		</view>
		<view class="goods-data">
			<view class="goods-title">
				<text>商品信息</text>
			</view>
			<view class="goods-list">
				<view class="list" v-for="(item,index) in shopList" :key="index">
					<view class="thumb">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="item">
						<view class="title">
							<text class="name two-omit">{{item.title}}</text>
							<text class="attr">{{item.size}}</text>
						</view>
						<view class="price-number">
							<view class="price">
								<text class="min">￥</text>
								<text class="max">{{item.money || item.price}}</text>
								<text class="min">.00</text>
							</view>
							<view class="number">
								<text>x {{item.goods_num || item.num}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="delivery">
				<div class="list">
					<view class="title">配送</view>
					<view class="content">
						<text>快递运输</text>
						<text class="iconfont icon-iconmore"></text>
					</view>
				</div>
				<div class="list">
					<view class="title">留言</view>
					<view class="content">
						<input type="text" placeholder="选填,建议先和商家沟通确认">
					</view>
				</div>
			</view>
		</view>
		<view class="discounts-data">
			<view class="discounts">
				<div class="list" @click="useCoupon = true">
					<view class="title">优惠券</view>
					<view class="content">
						<text>无可用</text>
						<text class="iconfont icon-iconmore"></text>
					</view>
				</div>
				<div class="list">
					<view class="title">积分</view>
					<view class="content">
						<text>共300，满1000可用</text>
					</view>
				</div>
			</view>
		</view>
		<view class="order-price">
			<view class="price-list">
				<view class="list">
					<view class="title">
						<text>商品金额</text>
					</view>
					<view class="price">
						<text>￥{{total}}.00</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>会员折扣</text>
					</view>
					<view class="price">
						<text>-￥{{discount}}.00</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>运费</text>
					</view>
					<view class="price">
						<text class="highlight">+￥0.00</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>运费险</text>
					</view>
					<view class="price">
						<text class="highlight">+￥0.00</text>
					</view>
				</view>
			</view>
		</view>
		<view class="address-tips" :style="scrollTop >= 100 ? '':'display:none'">
			<text>{{addressMessage.provide+addressMessage.address}}</text>
		</view>
		<view class="footer-submit">
			<view class="price">
				<text class="min">￥</text>
				<text class="max">{{lasttotal}}</text>
				<text class="min">.00</text>
			</view>
			<view class="submit" @click="onSubmit">
				<text>提交订单</text>
			</view>
		</view>
		<goods-coupon :isShow="useCoupon" @noshow="useCoupon = false"></goods-coupon>
	</view>
</template>

<script setup>
	import {
		computed,
		defineComponent,
		reactive,
		ref
	} from 'vue';
	import GoodsCoupon from '../../components/GoodsCoupon/GoodsCoupon.vue'
	defineComponent([GoodsCoupon])
	const useCoupon = ref(false)
	const scrollTop = ref(0)
	const total = ref(0)
	const addressMessage = reactive({
		name: "张三",
		mobile: "178****8888",
		provide: "黑龙江哈尔滨市道里区城区",
		address: "爱建路1333号"
	})
	const discount = ref(19)
	const shopList = reactive([{
		title: "小黄鸭儿童鞋2022夏季女童运动鞋男童透气网鞋断JFK小黄鸭儿童",
		image: "https://gd-hbimg.huaban.com/a99889190a94e35324441713a67833737d5706082c1434-rF3ooo_fw658webp",
		num: 2,
		price: '999'
	}])
	import {
		onPageScroll,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	onLoad(() => {
		let list = uni.getStorageSync('shopList')
		if (list) {
			shopList.splice(0)
			shopList.push(...JSON.parse(list))
			total.value = computed(() =>
				shopList.filter((v) => v.istrue).reduce((pre, cur) => {
					return pre + cur.money * cur.goods_num
				}, 0))
			lasttotal.value = total.value.getter() - discount.value
		}
	})
	onShow(() => {
		let message = uni.getStorageSync('address')
		if (message) {
			for (let key in JSON.parse(message)) {
				addressMessage[key] = JSON.parse(message)[key]
			}
		}
	})

	const lasttotal = ref()
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})
	const onSubmit = () => {
		uni.redirectTo({
			url: '/pages/CashierDesk/CashierDesk',
		})
	}
	const onSkip = (type) => {
		switch (type) {
			case 'address':
				uni.navigateTo({
					url: '/pages/AddressList/AddressList?type=choose',
				})
				break;
		}
	}
</script>

<style scoped lang="scss">
	@import 'ConfirmOrder.scss';
</style>